<template>
	<page-meta :page-style="'overflow:'+(pageMetaShow?'hidden':'visible')"></page-meta>
	<view class="content" :style="{paddingTop: titleTop + 'px'}">
		<image class="indexBg" src="https://static20250730.oss-cn-hangzhou.aliyuncs.com/wechatminiv2/indexBg1.png"
			mode="aspectFill"></image>
		<view class="mainHeader" :style="{minHeight: statusBarHeight+'px'}">
			<returnIcon></returnIcon>
			<!-- <image src="/static/index/headerImg.png" class="headerImg" mode="widthFix"></image> -->
		</view>
		<view class="guideHeader">
			<!-- <view class="title">
				全职高手全职高手全职高手
			</view> -->
			<view class="userCard">
				<image src="https://static20250730.oss-cn-hangzhou.aliyuncs.com/wechatminiv2/tjBg.png" class="zhiBg"
					mode="aspectFill"></image>

				<view class="userInfo">
					<view class="imgBg">

						<image :src="userinfo.avatar||''" class="userImg" mode="aspectFill"></image>
					</view>
					<view class="infoTxt">
						<view class="name">
							<view class="lable">
								姓名/NANE
							</view>
							<view class="value">
								{{userinfo.nickname||''}}
							</view>
						</view>
						<view class="idNumder">
							<view class="lable">
								QQ号/ID
							</view>
							<view class="value">
								{{userinfo.qq||''}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bookLay">
			<!-- <image src="/static/index/maomaoIcon.png" class="maomaoIcon" mode="widthFix"></image> -->
			<!-- <image src="/static/index/bookBg.png" class="bookBg" mode="widthFix"></image> -->
			<image src="https://static20250730.oss-cn-hangzhou.aliyuncs.com/wechatminiv2/tjBg2.png" class="bookBg"
				mode="widthFix"></image>

			<view class="tabLay">
				<!-- <view :class="tabOptionIndex==0?'tabOption action':'tabOption'" @click="tabOptionIndexFn(0)">
					<image v-if="tabOptionIndex==0" src="/static/index/zhua.png" mode="widthFix"></image>
					<view class="txt">
						全部
					</view>
				</view> -->
				<view :class="tabOptionIndex==1?'tabOption action':'tabOption'" @click="tabOptionIndexFn(1)">
					<image v-if="tabOptionIndex==1" src="/static/index/zhua.png" mode="widthFix"></image>
					<view class="txt">
						已拥有
					</view>
				</view>
				<view :class="tabOptionIndex==2?'tabOption action':'tabOption'" @click="tabOptionIndexFn(2)">
					<image v-if="tabOptionIndex==2" src="/static/index/zhua.png" mode="widthFix"></image>
					<view class="txt">
						未拥有
					</view>
				</view>
			</view>
			<view class="bookBox">
				<view class="progressBox">
					<view class="progressLay">

						<progress :percent="pgList" activeColor="#FF9696" backgroundColor="#FFFFFF" active
							stroke-width="6" border-radius='6' class="progressItem" />
						<image src="/static/index/zhua2.png" class="zhuaIcon" mode="widthFix"
							:style="{left:`${pgList}%`}">
						</image>
					</view>
					<view class="numberBox">
						<image class="numberIcon" src="/static/index/numberIcon.png" mode="widthFix"></image>
						{{haveList.length}}/{{all_images.length}}
					</view>
				</view>
				<!-- // <slider :value="pgList" @change="sliderChange" step="5" /> -->
				<!-- <slider :value="pgList" activeColor="#FF9CBB" backgroundColor="#FFCCCC" blockSize="15"
					blockColor="#FF9CBB" /> -->
				<!-- <view class="tipTxt">
					本店已收录16张
				</view> -->
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll">
					<view class="pictureBox">
						<noData v-if="list.length === 0"></noData>
						<template v-else>
							<view class="pictureItem" v-for="(item,index) in list" :key="index">
								<cardBag :cardWidth='170' :cardHeight='172' :tagWidth='84' :titleColor="'#FD8C8C'"
									:cardData="item" :urlKey="'thumbnail'">
									<template #infoMore>
										<view class="dateBox">
											<template v-if="!item.disabled">
												<!-- <image src="/static/index/dateIcon.png" class="dateIcon"
													mode="aspectFit">
												</image> -->
												<view class="tagTxt " v-if="item.cat_type==1">画师图</view>
												<view class="tagTxt tagTxt2" v-if="item.cat_type==2">扭赠</view>
												<view class="tagTxt tagTxt3" v-if="item.cat_type==3">端盒</view>
											</template>
										</view>
									</template>
								</cardBag>
							</view>
						</template>
					</view>
				</scroll-view>

			</view>
			<!-- <view class="pagination">
				<view class="pagLeft">
					<image class="pageIcon" v-if="current==1" src="/static/index/pagIcon2.png" mode=""></image>
					<image class="pageIcon" v-else style="transform: scaleX(-1);" src="/static/index/pagIcon1.png"
						mode="" @click="current--"></image>
				</view>
				<view class="pagContent">
					{{current}}/{{total}}
				</view>
				<view class="pagRight">
					<image class="pageIcon" v-if="current==total" style="transform: scaleX(-1);"
						src="/static/index/pagIcon2.png" mode=""></image>
					<image class="pageIcon" v-else src="/static/index/pagIcon1.png" mode="" @click="current++"></image>

				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pgList: 0,
				pageMetaShow: false,
				tabOptionIndex: 1,
				total: 4,
				current: 1,
				list: [],
				userinfo: {},
				shopId: '',
				machineId: '',
				machine: {},
				all_images: [],
				haveList: [],
				haveListNo: [],
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			};
		},
		onLoad(e) {
			this.shopId = e.shopId
			this.machineId = e.machineId;
			this.machinesDetailFn();
		},
		onShow() {
			let that = this;
			// setTimeout(() => {
			// 	that.pgList = 80;
			// }, 1000)
			this.userinfo = uni.getStorageSync('userInfo') || {};
		},
		methods: {
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				
			},
			tabOptionIndexFn(index) {
				console.log(index);
				this.tabOptionIndex = index;
				this.goTop()
				if (this.tabOptionIndex == 1) {
					this.list = this.haveList;
				} else {
					this.list = this.haveListNo;
				}
			},
			sliderChange(e) {
				this.pgList = e.detail.value
				console.log('value 发生变化：' + e.detail.value)
			},
			// 通过ID获取机台详情
			machinesDetailFn() {
				this.$http('/v1/machines/detail/' + this.machineId).then(res => {
					console.log(res, "获取机台详情");
					if (res.code == 0) {
						const data = res.data;
						this.machine = data.machine;
						// this.draw_to_direct_count = data.draw_to_direct_count;
						this.all_images = data.all_images.filter(item => {
							return item.parent_id == 0;
						});
						this.haveList = this.all_images.filter(item => {
							return item.user_have;
						});
						this.haveListNo = this.all_images.filter(item => {
							return !item.user_have;
						});
						this.list = this.haveList;
						this.pgList = ((this.haveList.length / this.all_images.length) * 100) //.toFixed(2);
						// console.log(this.haveList, this.haveListNo, "this.list");
						console.log(this.pgList, "pgList");
						// 只会显示parent_id==0的参数;
						// this.shopsDetail = res.data.shop;
						// this.is_followed = res.data.is_followed;
					} else {
						this.$showToast(res.msg)
					}
				})


			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.indexBg {
			width: 100vw;
			height: 100vh;
			position: fixed;
			z-index: -2;
			top: 0;
		}

		.mainHeader {
			padding-left: 38upx;
			// margin-bottom: 26upx;
			position: relative;

			.headerImg {
				width: 406upx;
				position: absolute;
				top: 0;
				left: 56upx;
			}
		}

		.guideHeader {
			position: relative;
			@include flexLayout(flex-start, space-between);

			.title {
				font-family: STYuanti-SC, STYuanti-SC;
				font-weight: bold;
				font-size: 54rpx;
				color: #FFF6F6;
				line-height: 76rpx;
				text-shadow: 0px 4px 8px rgba(255, 0, 74, 0.5);
				padding-left: 42upx;
				padding-top: 70upx;
			}

			.userCard {
				position: relative;
				margin: 38upx auto 38upx;

				// transform: translateX(-50%);
				// left: 50%;
				/* position: absolute;
			top: 0;
			right:0; */
				.zhiBg {
					position: absolute;
					top: 0;
					right: 0;
					@include setwh(632upx, 230upx);

				}

				.userInfo {
					position: relative;
					z-index: 1;
					// width: 456rpx;
					// height: 184rpx;
					width: 632upx;
					height: 230upx;
					// background: #FFFFFF;
					// box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(153, 153, 153, 0.5);
					// border-radius: 20rpx 0 0 20rpx;
					padding: 40upx 0 0 34upx;

					// margin-top: 100upx;
					// margin-bottom: 40upx;
					@include flexLayout(flex-start, flex-start);

					.imgBg {
						@include flexLayout(center, center);
						background: url('/static/index/userImgIcon.png') no-repeat;
						background-size: cover;
						@include setwh(138rpx, 138rpx);

						margin-right: 20upx;

						.userImg {
							@include setwh(118rpx, 118rpx);
							background-color: #F3F3F3;
							border-radius: 50%;
						}
					}

					.infoTxt {
						.lable {
							font-family: Huiwen;
							font-weight: normal;
							font-size: 20rpx;
							color: #020202;
							margin-bottom: 8upx;
						}

						.name {
							border-bottom: 2upx dashed #A4A4A4;
							padding-bottom: 12upx;
							margin-bottom: 6upx;

							.value {
								font-family: SourceHanSansSC, SourceHanSansSC;
								font-weight: bold;
								font-size: 30rpx;
								color: #000000;
								line-height: 40rpx;
							}
						}

						.idNumder {
							.value {
								font-family: SourceHanSansSC, SourceHanSansSC;
								font-weight: 500;
								font-size: 20rpx;
								color: #A4A4A4;
								line-height: 30rpx;
								text-align: left;
							}
						}
					}
				}
			}
		}

		.bookLay {
			// margin-top: 70upx;
			position: relative;

			.maomaoIcon {
				position: absolute;
				z-index: 1;
				left: 60upx;
				bottom: -16upx;
				@include setwh(170rpx, 0);
			}

			.bookBg {
				position: absolute;
				@include setwh(730rpx, 0);
			}

			.tabLay {
				position: absolute;
				right: 16upx;
				padding-top: 84upx;

				.tabOption {
					writing-mode: vertical-rl;
					font-family: STYuanti-SC, STYuanti-SC;
					font-weight: bold;
					font-size: 29rpx;
					color: #FFCACA;
					text-align: center;
					padding: 32upx 8upx 46upx;
					background: #FFEAEA;
					box-shadow: 6rpx 4rpx 8rpx 0rpx rgba(140, 140, 140, 0.5);
					border-radius: 0 12rpx 12rpx 0;
					line-height: 1;
					letter-spacing: 12upx;
					position: relative;
					animation: all 1s;

					image {
						position: absolute;
						top: 8upx;
						right: 8upx;
						width: 38upx;
						height: 0;
						z-index: 1;
					}

					.txt {
						position: relative;
						z-index: 2;
					}
				}

				.tabOption+.tabOption {
					margin-top: 2upx;
				}

				.action {
					padding: 26upx 15upx 32upx;
					// line-height: 50rpx;
					font-weight: bold;
					font-size: 36rpx;
					color: #D06363;
					background: #FFBCBC;
					letter-spacing: 18upx;
					animation: all 1s;
				}
			}

			.bookBox {
				position: absolute;
				z-index: 5;
				padding-left: 38upx;
				padding-top: 78upx;

				.progressBox {
					@include flexLayout(center, flex-start);
					position: relative;

					.progressLay {
						position: relative;
						width: 400upx;

						.progressItem {
							border: 2upx solid #fff;
						}

						.zhuaIcon {
							position: absolute;
							width: 52upx;
							height: 0;
							left: 10%;
							transition: left 5s ease;
							// transition: left 4s;
							// transform: translate(-50%, -50%);
							transform: translate(-100%, -50%);
						}
					}


					.numberBox {
						margin-left: 28upx;
						min-width: 106rpx;
						height: 36upx;
						border: 2upx solid #D06363;
						border-radius: 20upx;
						padding: 0 10upx;
						@include flexLayout(center, center);
						font-family: SourceHanSansSC, SourceHanSansSC;
						font-weight: bold;
						font-size: 22rpx;
						line-height: 1;
						color: #B48568;

						.numberIcon {
							@include setwh(26rpx, 0);
							padding-right: 12upx;
						}
					}
				}

				/* .tipTxt {
					font-family: SourceHanSansSC;
					font-weight: bold;
					font-size: 21rpx;
					color: #D06363;
				} */
				.scroll-Y {
					height: 780upx;
					margin-left: 24upx;
					margin-top: 20upx;
				}

				.pictureBox {
					width: 600upx;
					@include flexLayout(center, flex-start);
					flex-wrap: wrap;
					column-gap: 12rpx;
					row-gap: 14upx;
					// background: #FFFFFF;
					position: relative;
					z-index: 3;
					::v-deep .nodataLay {
						width: calc(600upx - 20upx);
					}

					::v-deep .pictureItem {
						.infoLay .title {
							font-size: 20upx;
						}
					}

					.dateBox {
						// @include flexLayout(center, flex-start);
						padding-top: 2upx;
						// min-height: 28upx;

						/* .dateIcon {
							@include setwh(14upx, 14upx);
							margin-right: 10upx;
						} */

						.tagTxt {
							width: 50rpx;
							height: 16rpx;
							background: #FFE1BE;
							color: #DE946B;
							border-radius: 2rpx;
							font-family: SourceHanSansSC, SourceHanSansSC;
							font-weight: 500;
							font-size: 10rpx;
							line-height: 16rpx;
							text-align: center;
						}
						.tagTxt2{
							background: #BED8FF;
							color: #668EFD;
						}
						.tagTxt3{
							background: #BEF6FF;
							color: #0FB5E2;
						}
					}
				}
			}

			.pagination {
				position: absolute;
				top: 830upx;
				right: 242rpx;
				z-index: 3;
				@include flexLayout(center, center);

				.pageIcon {
					@include setwh(32upx, 36upx);
					padding: 0 40upx;
				}

				.pagContent {
					width: 104rpx;
					height: 44rpx;
					font-family: SourceHanSansSC, SourceHanSansSC;
					font-weight: bold;
					font-size: 24rpx;
					color: #FFFFFF;
					text-align: center;
				}
			}
		}
	}
</style>